import React, { Component } from 'react';
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Table, Tag, Space, Modal, message } from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import defaultImg from 'assets/img/error.png';
import { Link } from 'react-router-dom';

// 导入接口
import { getArticle, delArticle } from 'api/article';
import { ArticleStatus } from 'api/constants.js';
import Channel from 'components/Channel';
const { confirm } = Modal;

export default class ArticleList extends Component {
	state = {
		articles: {}
	};

	// 存放当前请求列表参数
	reqParams = {
		page: 1,
		per_page: 10
	};

	async getArticleList() {
		const res = await getArticle(this.reqParams);
		// console.log(res)
		this.setState({
			articles: res.data
		});
	}

	onChange = (page, pageSize) => {
		console.log(page, pageSize);
		this.reqParams.page = page;
		this.reqParams.per_page = pageSize;
		this.getArticleList();
	};

	onFinish = ({ status, channel_id, date }) => {
		if (status !== -1) {
			this.reqParams.status = status;
		} else {
			delete this.reqParams.status;
		}
		if (channel_id !== undefined) {
			this.reqParams.channel_id = channel_id;
		}
		if (date) {
			this.reqParams.beg_pubdate = date[0].startOf('day').format('YYYY-MM-DD HH:mm:ss');
			this.reqParams.end_pubdate = date[1].endOf('day').format('YYYY-MM-DD HH:mm:ss');
		}
		// console.log(this.reqParams)
		// 重新加载列表
		this.reqParams.page = 1;
		this.getArticleList();
	};

	// 删除文章
	delArticle = (id) => {
		confirm({
			title: '温馨提示?',
			icon: <ExclamationCircleOutlined />,
			content: '确定是否删除？',
			onOk: async () => {
				await delArticle(id);
				this.getArticleList();
				message.success('删除成功');
			}
		});
	};

	handleEdit = (id) => {
		console.log(id);
		this.props.history.push(`/home/publish/${id}`);
	};

	componentDidMount() {
		this.getArticleList();
	}

	columns = [
		{
			title: '封面',
			render(data) {
				if (data.cover.type === 0) {
					return <img src={defaultImg} alt="" style={{ width: 200, height: 120, objectFit: 'cover' }} />;
				}
				return <img src={data.cover.images[0]} alt="" style={{ width: 200, height: 120, objectFit: 'cover' }} />;
			}
		},
		{
			title: '标题',
			dataIndex: 'title'
		},
		{
			title: '状态',
			dataIndex: 'status',
			render: (status) => {
				const obj = ArticleStatus.find((item) => item.id === status);
				return <Tag color={obj.color}>{obj.name}</Tag>;
			}
		},
		{
			title: '发布时间',
			dataIndex: 'pubdate'
		},
		{
			title: '阅读数',
			dataIndex: 'read_count'
		},
		{
			title: '评论数',
			dataIndex: 'comment_count'
		},
		{
			title: '点赞数',
			dataIndex: 'like_count'
		},
		{
			title: '操作',
      render: (data) => {
				return (
					<Space>
						<Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => this.handleEdit(data.id)} />
						<Button type="primary" danger shape="circle" icon={<DeleteOutlined />} onClick={() => this.delArticle(data.id)} />
					</Space>
				);
			}
		}
	];

	render() {
		const { total_count, results, per_page, page } = this.state.articles;
		return (
			<div className="articlelist">
				<Card
					title={
						<Breadcrumb separator="/">
							<Breadcrumb.Item>
								<Link to="/home">首页</Link>
							</Breadcrumb.Item>
							<Breadcrumb.Item>文章列表</Breadcrumb.Item>
						</Breadcrumb>
					}
				>
					<Form initialValues={{ status: -1 }} onFinish={this.onFinish}>
						<Form.Item label="状态" name="status">
							<Radio.Group>
								{ArticleStatus.map((item) => (
									<Radio key={item.id} value={item.id}>
										{item.name}
									</Radio>
								))}
							</Radio.Group>
						</Form.Item>

						<Form.Item label="频道" name="channel_id">
							<Channel />
						</Form.Item>

						<Form.Item label="日期" name="date">
							<DatePicker.RangePicker />
						</Form.Item>

						<Form.Item>
							<Button type="primary" htmlType="submit">
								筛选
							</Button>
						</Form.Item>
					</Form>
				</Card>

				<Card title={`根据筛选条件共查询到${total_count}条结果:`}>
					<Table
						columns={this.columns}
						dataSource={results}
						rowKey="id"
						pagination={{
							position: ['bottomCenter'],
							total: total_count,
							pageSize: per_page,
							current: page,
							onChange: this.onChange
						}}
					/>
				</Card>
			</div>
		);
	}
}
